<template>
    <div class="supresulttitle">
        <div class="m-3">
            <el-date-picker
                v-model="valueTime"
                type="date"
                placeholder="累计数据"
                size="small"
            />
        </div>
    </div>
    <div class="navbox">
        <div class="item" :class="navId === item.id ? 'chose' : ''" v-for="item in navList" :key="item.id"
            @click="navChange(item.id)">
            <div class="heng1" :class="navId === item.id ? 'choseTxt setColor' : ''">{{ item.name }}</div>
            <div class="heng2" :class="navId === item.id ? 'choseTxt setColor' : ''">{{ item.number }}</div>
        </div>
    </div>
    <!-- 下面操作以组件代替 -->
    <div class="keepheight" v-show="navId===1">
        <EventDetails ></EventDetails>
    </div>
    <div class="keepheight" v-show="navId===2">
        <OperatingRisk></OperatingRisk>
    </div>
    <div class="keepheight" v-show="navId===3">
        <ComplaintInfo></ComplaintInfo>
    </div>
    <div class="keepheight" v-show="navId===4">
        <EmergencySupport></EmergencySupport>
    </div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import EventDetails from './EventDetails.vue';
import OperatingRisk from './OperatingRisk.vue';
import ComplaintInfo from './ComplaintInfo.vue';
import EmergencySupport from './EmergencySupport.vue';

let navId = ref(1)
let navList = ref([
    { name: '事件多源汇聚', id: 1, number: '2986件' },
    { name: '经营风险', id: 2, number: '925件' },
    { name: '日常投诉', id: 3, number: '1615件' },
    { name: '应急保障', id: 4, number: '446件' },
])
function navChange(id: number) {
    if (navId.value === id) {
        return;
    }
    navId.value = id
}

const valueTime = ref('')

</script>

<style lang="less" scoped>
.keepheight{
  width: 100%;
  height: 470px;
}
.supresulttitle {
    width: 100%;
    height: 44px;
    margin-top: 9px;
    background-image: url("../../../assets/mahjong/icon11.png");
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.m-3{

}
.m-3 :deep(.el-input--small) {
    width: 100px;
    height: 28px;
}
.m-3 :deep(.el-input--small .el-input__wrapper) {
    border: none;
    background: none;
    background-image: url("../../../assets/mahjong/icno14.png");
    background-size: 100% 100%;
}
.navbox {
    width: 100%;
    margin-top: 9px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .chose {
        background-image: url("../../../assets/mahjong/icon13.png") !important;
    }

    .item {
        width: 130px;
        height: 54px;
        background-image: url("../../../assets/mahjong/icon12.png");
        background-size: 100% 100%;
        cursor: pointer;

        .choseTxt {
            color: rgba(255, 255, 255, 1);
        }

        .heng1 {
            width: 100%;
            text-align: center;
            font-family: PingFangSC-Regular;
            font-weight: 400;
            font-size: 14px;
            color: rgba(255, 255, 255, .7);
            margin-top: 5px;
        }

        .heng2 {
            width: 100%;
            font-family: PingFangSC-Semibold;
            font-weight: 600;
            font-size: 14px;
            color: rgba(255, 255, 255, .7);
            text-align: center;
        }
    }
}
</style>
